<template>
	<view class="tips">
		<view class="fix-tip-icon">
			<!-- <van-icon name="/static/icon/tips.png" size="60" /> -->
		</view>
		<view class="title">{{ props.title }}</view>
		<template v-if="props.des">
			<view class="txt" v-if="typeof props.des === 'string'">{{ props.des }}</view>
			<view v-else class="txt" v-for="(d,i) in props.des" :key="i">
				<view v-if="typeof d === 'string'">{{d}}</view>
				<view class="use-help-style" v-else @click="() => jumpPage(d.type)">{{d.text}}</view>
			</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
	interface txtProps{
		text: string
		type: string
	}
	
	interface TipsProps{
		title: string
		des: String | Array<String | txtProps> | undefined | null | ''
	}
	
	const props =  withDefaults(defineProps<() => TipsProps>(), {
		title: '',
		des: ''
	})
	
	// withDefaults(defineProps => () => txtProps, {})
	// defineProps({
	// 	title: {
	// 		type: String,
	// 		requred: true
	// 	},
	// 	des: {
	// 		type: DesType,
	// 		requred: true
	// 	}
	// })
	
	const jumpPage = (type) => {
		uni.navigateTo({
			url:`/pagesD/useHelp/index?type=${type}`
		})
	}
</script>

<style scoped lang="scss">
	.tips{
		// width: calc(100% - 40upx);
		// min-height: 300upx;
		background: linear-gradient( 180deg, #FEFCEB 0%, #FFFFFF 100%);
		border: 1px solid #FFFFFF;
		padding: 40upx 20upx;
		position: relative;
		.fix-tip-icon{
			position: absolute;
			right: 50upx;
			top: 10upx;
		}
		.title{
			font-weight: 800;
			font-size: 30upx;
			color: #081A2A;
			text-align: center;
			padding:5upx 0 50upx 0;
		}
		.txt{
			padding-right: 40upx;
			text-align: left;
			font-weight: 400;
			font-size: 28upx;
			line-height: 50upx;
			color: #6F410C;
		}
	}
	.use-help-style{
		color: $blue-theme;
	}
</style>